<template>
  <el-dialog
    :title="dataForm.name + '密钥'"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      ref="dataForm"
      label-width="80px"
      v-loading="loading"
    >
      <el-form-item label="名称" prop="name">
        {{ dataForm.name }}
      </el-form-item>
      <el-form-item label="AK" prop="ak">
        {{ dataForm.ak }}
      </el-form-item>
      <el-form-item label="SK" prop="sk">
        {{ dataForm.sk }}
      </el-form-item>
      <el-form-item>
        <el-button type="text" @click="updateAkHandler">更新密钥</el-button>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getById , updateAk } from '@/api/exter/app'
export default {
  data() {
    return {
      visible: false,
      loading: false,
      dataForm: {
        id: "",
        name: "",
        ak: "",
        sk: ""
      }
    };
  },
  methods: {
    init(id) {
      this.dataForm.id = id;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) { 
          getById(this.dataForm.id).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.name = data.data.name;
              this.dataForm.ak = data.data.ak;
              this.dataForm.sk = data.data.sk;
            }
          });
        }
      });
    },
    updateAkHandler() {
      this.$confirm(
        "此操作将更新密钥信息,之前的密钥将完全不可用,需要谨慎操作, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.loading = true
        updateAk(this.dataForm.id).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.ak = data.data.ak
              this.dataForm.sk = data.data.sk
            }
          })
          .finally(() => {
            this.loading = false
          });
      });
    }
  }
};
</script>
